<template>
  <div class="main-box scroll">
    <div class="table-box">
      <ProTable
        ref="proTable"
        highlight-current-row
        :columns="columns"
        :request-api="getPendingTicketListApi"
        :pagination="true"
        :show-summary="false"
        :indent="20"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      >
        <!-- <template #tableHeader="scope">
          <el-button type="danger" @click="deleteTicket(scope.selectedList)" :disabled="!(scope.selectedList.length > 0)">
            删除
          </el-button>
        </template> -->
        <template #name="scope">
          <span v-if="getStatusStyle(scope.row.status)" class="name-tag" :style="getStatusStyle(scope.row.status)">
            {{ statusList[scope.row.status][1] }}
          </span>
          <el-button type="primary" link @click="goToTicketDetail(scope.row)">{{ scope.row.name }}</el-button>
        </template>
        <template #status="scope">
          {{ statusList[scope.row.status] }}
        </template>
        <template #priority="scope">
          <span class="priority-span" :style="getPriorityStyle(scope.row.priority)">
            {{ getCurPriority(scope.row.priority).name }}
          </span>
        </template>
        <template #current_operator="scope">
          {{ scope.row.current_operator.join("、") }}
        </template>
      </ProTable>
      <!-- <modalAddOrEdit ref="addOrEditTicketRef" @refresh="refresh" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Ticket } from "@/api/interface/ticket";
// import modalAddOrEdit from "@/views/sysManagement/user_management/component/modal_add_or_edit.vue";
import { getPendingTicketListApi, getBusinessListApi } from "@/api/modules/ticket/pending";
// import { getPendingTicketListApi, getBusinessListApi, batchDeleteTicketApi } from "@/api/modules/ticket/pending";
// import { useHandleData } from "@/hooks/useHandleData";
import { useRouter, useRoute } from "vue-router";

// 获取路由实例
const router = useRouter();
// 获取当前路由对象
const route = useRoute();

// import { Plus } from "@element-plus/icons-vue";
// import { ElMessageBox, ElMessage } from "element-plus";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";
// const route = useRoute();
// const authStore = useAuthStore();
// const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// ProTable 实例

const proTable = ref<ProTableInstance>();
const priorityList = reactive([
  { key: "3", name: "特急", color: "rgba(240, 104, 105)" },
  { key: "2", name: "紧急", color: "rgba(251, 178, 37)" },
  { key: "1", name: "一般", color: "rgba(66, 204, 178)" }
]);
const statusList = reactive({
  REVIEW: "审核中",
  PENDING: "处理中",
  REJECTED: "已退回",
  REVOKED: "已撤回",
  FINISHED: "完成"
});
let initParam = reactive({ source_type: "" });
// 表格配置项
const columns = reactive<ColumnProps<Ticket.ResTicketList>[]>([
  { type: "selection", width: 80 },
  { type: "index", label: "#", width: 80 },
  { prop: "name", label: "工单标题", align: "left", search: { el: "input" }, minWidth: 250 },
  { prop: "id", label: "工单编号", search: { el: "input" }, minWidth: 120 },
  {
    prop: "business_name",
    label: "业务类型",
    search: { el: "select", key: "business" },
    enum: async () => {
      let { data } = await getBusinessListApi();
      return { data: data.results };
    },
    fieldNames: { label: "name", value: "name" },
    minWidth: 120
  },
  { prop: "status", label: "工单状态", width: 100 },
  {
    prop: "priority",
    label: "紧急程度",
    search: { el: "select" },
    enum: priorityList,
    fieldNames: { label: "name", value: "key" },
    width: 100
  },
  { prop: "current_node", label: "流程节点", minWidth: 120 },
  { prop: "current_operator", label: "当前未操作", minWidth: 150 },
  { prop: "create_at", label: "发起时间", search: { el: "date-picker", props: { type: "datetimerange" }, span: 2 }, width: 180 }
]);

const getCurPriority = priority => {
  return priorityList.find(a => a.key === priority) || { name: "", color: "" };
};
const getPriorityStyle = priority => {
  const priorityColor = getCurPriority(priority).color;
  if (!priorityColor) return {};
  const rgbMatch = priorityColor.match(/\d+/g);
  if (rgbMatch && rgbMatch.length >= 3) {
    const rgb = rgbMatch.map(Number);
    const alpha = 0.15;
    return {
      color: priorityColor,
      backgroundColor: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`
    };
  }
};

const getStatusStyle = status => {
  switch (status) {
    case "REJECTED":
      return {
        backgroundColor: "rgba(240, 104, 105)"
      };
    case "REVOKED":
      return {
        backgroundColor: "rgba(66, 204, 178)"
      };
    default:
      break;
  }
};

// const deleteTicket = async (data: any[]) => {
//   const toDoList: string[] = [];
//   const notToDoList: string[] = [];
//   const ids: number[] = data
//     .map(item => {
//       if (["REJECTED", "REVOKED"].includes(item.status)) {
//         toDoList.push(item.name);
//         return item.id;
//       } else {
//         notToDoList.push(item.name);
//       }
//     })
//     .filter(id => id !== undefined);
//   await useHandleData(batchDeleteTicketApi, { ids: ids }, ["删除", "工单"], toDoList, notToDoList);
//   proTable.value?.getTableList();
// };

const goToTicketDetail = data => {
  router.push({
    name: "ticket_detail",
    query: {
      id: data.id,
      business_id: data.business_id,
      flowType: data.status || "NEW"
    }
  });
};

const setInitParamsByRoute = () => {
  const list = {
    source_type: route.query.source_type || ""
  };
  Object.assign(initParam, list);
};

watch(
  () => route.query.source_type,
  () => setInitParamsByRoute(),
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.main-box {
  flex-direction: row;
  height: 100%;
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
  .priority-span {
    position: relative;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
  }
  .name-tag {
    display: inline-block;
    width: 24px;
    font-size: 12px;
    color: white;
    text-align: center;
    border-radius: 6px;
  }
}
</style>
